<template>
	<nav>
		<ul>
			<router-link to="/film" tag="li" activeClass="myactive">
				<i class="iconfont icon-form"></i>
				film</router-link>
			<router-link to="/cinema" tag="li" activeClass="myactive">
				<i class="iconfont icon-box"></i>
				cinema</router-link>
			<router-link to="/center" tag="li" activeClass="myactive">
				<i class="iconfont icon-category"></i>
				center</router-link>
		</ul>

	</nav>
</template>

<script>
	export default {
		name: 'Tabbar',
		data() {
			return {}
		}
	}
</script>

<style scoped>
	.myactive {
		color: red;
	}

	nav {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 50px;
		background: white;
	}

	nav ul {
		display: flex;
	}

	nav ul li {
		flex: 1;
		/* line-height: 50px; */
		text-align: center;
	}
</style>
